<template>
  <div
    v-if="collection !== null"
    style="
       {
        width: 100%;
      }
    "
  >
    <ConTertiary />
    <div v-if="collection.length !== 0" class="content-container">
      <div class="container-flex">
        <ul>
          <li
            v-for="item in collection"
            @click="toDetails(item)"
            :key="item.collectId"
          >
            <SingleCard :res="item" />
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom" v-else>
      <div class="content">
        <img src="../assets/小人.png" alt="" />
        <div class="text">
          <div class="text-top">您的收藏还是空的！</div>
          <div class="text-bottom">快去购物吧！</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ConTertiary from "./ConTertiary.vue";
import SingleCard from "./SingleCard.vue";
import { getCollect } from "../api/home";
export default {
  name: "MyCollection",
  data() {
    return {
      collection: null,
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      getCollect().then((res) => {
        this.collection = res.data;
      });
    },
    toDetails(val) {
      this.$router.push({
        path: "/all-store/details/" + val.productId,
      });
    },
  },
  components: { ConTertiary, SingleCard },
};
</script>

<style lang="scss" scoped>
.content-container {
  width: 100%;
  background: #f5f5f5;
  .container-flex {
    padding-top: 0px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    ul {
      margin-bottom: 24px;

      display: flex;
      li {
        margin-right: 10px;
        margin-top: 20px;
      }
      li:nth-child(5n) {
        margin-right: 0px;
      }
    }
  }
}
.bottom {
  width: 100%;
  height: 598px;
  background: #f5f5f5;
  .content {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding-top: 46px;
    display: flex;
    img {
      display: block;
      width: 362px;
      height: 362px;
      margin-left: 98px;
    }
    .text {
      margin: 114px 0 0 80px;
      height: 78px;
      color: #b0b0b0;
      .text-top {
        font-size: 36px;
        line-height: 100%;
      }
      .text-bottom {
        margin-top: 24px;
        font-size: 18px;
        line-height: 100%;
      }
    }
  }
}
</style>
